/* 聊天室功能业务代码 */
const socket = io("http://localhost:3000"); // 1.连接服务

var username, avatar;

/* 2.登录功能 */
$("#login_avatar li").on("click", function () {
  // 头像点击选中功能
  $(this).addClass("now").siblings().removeClass("now");
});
/* 登录按钮点击 */
$("#loginBtn").on("click", function () {
  // 获取输入的名
  const username = $("#username").val().trim(); // trim 去掉空格
  if (!username) {
    alert("请输入用户名");
    return;
  }
  // 获取选择的头像
  const avatar = $(".login_box .avatar li.now img").attr("src");
  console.log(avatar);

  //告诉服务端
  socket.emit("login", {
    username: username,
    avatar: avatar,
  });
});
//监听登录成功的请求
socket.on("loginSuccess", (data) => {
  // alert('登录成功了')
  $(".login_box").fadeOut(); // 登录box淡出
  $(".container").fadeIn(); // 聊天界面显示
  // 设置用户头像与名字
  console.log(data);
  $(".avatar .avatar_url").attr("src", data.avatar);
  $(".info .username").text(data.username);

  username = data.username;
  avatar = data.avatar;
});
//监听登录失败的请求
socket.on("loginError", (data) => {
  alert("登录失败，用户名已存在");
});

// 监听添加用户的消息
socket.on("addUser", (data) => {
  /*  $('.system. .content').text('系统消息：' + data.username + '加入了聊天室') */

  $(".box-bd").append(`
    <div class="system">
        <p class="message_system">
            <span class="content">系统消息：" ${data.username}" 加入了聊天室</span>
        </p>
    </div>
`);
  scrollIntoView();
});

// 监听用户离开的消息
socket.on("delUser", (data) => {
  $(".box-bd").append(`
     <div class="system">
         <p class="message_system">
             <span class="content">系统消息：" ${data.username}" 离开了聊天室</span>
         </p>
     </div>
 `);
  scrollIntoView();
});

/* 监听用户列表 */
socket.on("userList", (data) => {
  $(".box-hd h3 span").text(data.length);
  data.forEach((item) => {
    $(".user-list ul").append(`
        <li class="user">
            <div class="avatar"><img src="${item.avatar}"></div>
            <div class="name">${item.username}</div>
        </li>
        `);
  });
});

/* 聊天功能 */
$(".btn-send").on("click", () => {
  const content = $("#content").html(); // 获取输入内容
  $("#content").html(""); // 清空
  if (!content) return alert("请输入内容");

  socket.emit("sendMessage", {
    msg: content,
    username: username,
    avatar: avatar,
  });
});
socket.on("receiveMessage", (data) => {
  // console.log(data)
  // 把接收到的消息显示到聊天窗口
  if (data.username === username) {
    //自己的消息
    $(".box-bd").append(`
        <div class="message-box">
                <div class="my message">
                  <img class="avatar" src="${data.avatar}" alt="" />
                  <div class="content">
                    <div class="bubble">
                      <div class="bubble_cont">${data.msg}</div>
                    </div>
                  </div>
                </div>
              </div>
        `);
  } else {
    //别人的消息
    $(".box-bd").append(`
        <div class="message-box">
                <div class="other message">
                  <img class="avatar" src="${data.avatar}" alt="" />
                  <div class="content">
                    <div class="nickname">${data.use}</div>
                    <div class="bubble">
                      <div class="bubble_cont">${data.msg}</div>
                    </div>
                  </div>
                </div>
              </div>
        `);
  }
  scrollIntoView();
});
function scrollIntoView() { // 窗口滚动最底部
  $(".box-bd").children(":last").get(0).scrollIntoView(false); // get表示获取它的原生DOM对象
}
// 发送图片功能
$('#file').on('change', function() {
    // 获取到该图片
    var file = this.files[0] // 获取选中的图片

    var fr = new FileReader() // 把图片转成base64
    fr.readAsDataURL(file)
    fr.onload = function() {
      socket.emit('sendImage', { // 可以在我们之前发送消息的sendMessage中加一个图片类型
        username: username,
        avatar: avatar,
        img: fr.result
      })
    }
  })
  // 发送图片
  socket.on("receiveImage", (data) => {
    // console.log(data)
    // 把接收到的消息显示到聊天窗口
    if (data.username === username) {
      //自己的消息
      $(".box-bd").append(`
          <div class="message-box">
                  <div class="my message">
                    <img class="avatar" src="${data.avatar}" alt="" />
                    <div class="content">
                      <div class="bubble">
                        <img src="${data.img}">
                      </div>
                    </div>
                  </div>
                </div>
          `);
    } else {
      //别人的消息
      $(".box-bd").append(`
          <div class="message-box">
                  <div class="other message">
                    <img class="avatar" src="${data.avatar}" alt="" />
                    <div class="content">
                      <div class="nickname">${data.use}</div>
                      <div class="bubble">
                      <img src="${data.img}">
                      </div>
                    </div>
                  </div>
                </div>
          `);
    }
    // scrollIntoView(); // 应该等待图片加载完成再滚动
    $('.box-bd img:last').on('load',function(){ // 最后一个img加载完成
        scrollIntoView();
    })
  });

  /* 发送表情功能 */
  //初始化jquery-emoji插件
  $('.face').on('click', function() {
    $('#content').emoji({
      button: '.face', // 指定按钮，没有指定会自动生成一个
      position: 'topRight', // 右上角
      showTab: true, // 只有一组表情时也显示tab栏
      animation: 'fade', // 动画
      icons: [
        {
          name: 'qq表情',
          path: '../lib/jquery-emoji/img/qq/',
          maxNum: 91, // 显示的最大数量
          excludeNums: [41, 45, 54], // 排除的数量
          file: '.gif',
          placeholder: '#qq_{alias}#'
        },
        {
            name: 'emoji表情',
            path: '../lib/jquery-emoji/img/emoji/',
            maxNum: 91,
            excludeNums: [41, 45, 54],
            file: '.png',
            placeholder: '#qq_{alias}#'
          },
          {
            name: '贴吧表情',
            path: '../lib/jquery-emoji/img/tieba/',
            maxNum: 91,
            excludeNums: [41, 45, 54],
            file: '.jpg',
            placeholder: '#qq_{alias}#'
          }
      ]
    })
})